<template>
  <div class="smart-actions-bar" v-if="showSmartActions">
    <el-alert
      title="智能建议"
      type="info"
      :closable="false"
      show-icon
    >
      <template #default>
        <span>检测到 {{ smartSuggestions.length }} 条智能处理建议</span>
        <el-button link @click="applyAllSuggestions">
          一键应用所有建议
        </el-button>
      </template>
    </el-alert>
    
    <div class="suggestion-chips">
      <el-tag
        v-for="suggestion in smartSuggestions"
        :key="suggestion.id"
        :type="getSuggestionType(suggestion.type)"
        closable
        @close="removeSuggestion(suggestion.id)"
        @click="applySuggestion(suggestion)"
        class="suggestion-chip"
      >
        <el-icon><MagicStick /></el-icon>
        {{ suggestion.description }}
      </el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { MagicStick } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps<{
  smartSuggestions: any[]
  getSuggestionType: Function
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'apply-suggestion', suggestion: any): void
  (e: 'apply-all-suggestions'): void
  (e: 'remove-suggestion', suggestionId: string): void
}>()

// 计算属性
const showSmartActions = computed(() => props.smartSuggestions.length > 0)

// 方法
const applySuggestion = (suggestion: any) => {
  emit('apply-suggestion', suggestion)
}

const applyAllSuggestions = () => {
  emit('apply-all-suggestions')
}

const removeSuggestion = (suggestionId: string) => {
  emit('remove-suggestion', suggestionId)
}
</script>

<style scoped lang="scss">
.smart-actions-bar {  
  .suggestion-chips {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    .suggestion-chip {
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>